<template>
  <MyDialog
    :dialog-form="dialogForm"
    :dialog-visible="dialogVisible"
    @dialogClose="onClose"
    @dialogConfirm="onSubmit"
  >
    <template #dialogBox>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon>
        <el-form-item label="通知人员" prop="timeWay">
          <el-select
            v-model="ruleForm.timeWay"
            multiple
            placeholder="选择通知时间"
            style="width: 240px"
            :disabled="
              props.row?.msgType != 6 &&
              props.row?.msgType != 8 &&
              props.row?.msgType != 14
            "
          >
            <el-option
              v-for="item in timeOptions"
              :key="item.id"
              :label="item.configName"
              :value="item.id"
            /> </el-select
          >，提醒{{ props.row.remindRole }}
        </el-form-item>
        <el-form-item label="提醒方式" prop="remindWay">
          <el-checkbox-group v-model="ruleForm.remindWay">
            <el-checkbox label="1" style="font-size: var(--el-font-size-base)"
              >软件消息提醒</el-checkbox
            >
            <el-checkbox label="2" style="font-size: var(--el-font-size-base)"
              >手机短信提醒</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive, defineAsyncComponent, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { editTemplate } from '/@/api/setting/enterpriseInfo'
import emitter from '/@/utils/mitt'
import { dictionaryList } from '/@/api/publicApi'

const MyDialog = defineAsyncComponent(
  () => import('/@/components/dialog/index.vue')
)
const ruleFormRef = ref<FormInstance>()

// 定义父组件传过来的值
const props = defineProps({
  myDialog: {
    type: Boolean,
    default: () => false
  },
  row: {
    type: Object,
    default: () => {}
  }
})

// const timeOptions = [
// 	{ label: '立刻', value: '1' },
// 	{ label: '提前30分钟', value: '2' },
// 	{ label: '提前一天', value: '3' },
// 	{ label: '提前3天', value: '4' },
// 	{ label: '提前5天', value: '5' },
// ]

const timeOptions = ref<any>([])
const getTimeoption = () => {
  dictionaryList({ configType: 'remind_duration', keyword: '' }).then((res) => {
    if (res.code == 0) {
      timeOptions.value = res.data
    }
  })
}

const dialogVisible = ref<boolean>(false) //弹窗是否出现
const dialogForm = reactive({
  width: '30%',
  title: '编辑'
})
const ruleForm = reactive({
  timeWay: [],
  remindWay: []
})

const rules = reactive<FormRules>({
  timeWay: [{ required: true, message: '选择通知时间', trigger: 'change' }],
  remindWay: [{ required: true, message: '选择提醒方式', trigger: 'change' }]
})

watch(
  () => props.myDialog,
  () => {
    nextTick(() => {
      ruleForm.timeWay = props.row.timeWay.split(',')
      ruleForm.remindWay = props.row.remindWay.split(',')
    })
    if (props.myDialog == true) {
      getTimeoption()
    }
    dialogVisible.value = true
  }
)

const onClose = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  dialogVisible.value = !dialogVisible.value
}

const onSubmit = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let param = {
        id: props.row.id,
        timeWay: ruleForm.timeWay.join(','),
        remindWay: ruleForm.remindWay.join(',')
      }
      let res = await editTemplate(param)
      if (res.code == 0) {
        ruleFormRef.value.resetFields()
        dialogVisible.value = !dialogVisible.value
        emitter.emit('msgFlash')
        ElMessage.success('添加成功！')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
